<template>
	<view>
		<view class="head margin">
			<text class="title">桌号<text>{{table}}</text></text> 
			<view class="flex text_div" v-for="i in food" :key="i">
				<image :src="url+i.goods_image" mode=""></image>
				<view class="text ">
					<view class="flex-cb">
						<text class="food_name">{{i.goods_title}}</text>
						<text>
							<text class="vip" style="color: #1CD699;">原价:</text>
							<text class="price" style="color: #FF2E2E;font-size: 30rpx;">
								<text style="font-size: 20rpx;">￥</text>{{i.goods_price}}
							</text>
						</text>
					</view>
					<view class="flex-cb num">
						<text class="x1">规格：X{{i.number}}</text>
						<text style="color: #FF2E2E;font-size: 30rpx;">
							<text class="vip" style="font-size: 26rpx;">会员价:</text>
							<text class="price"><text style="font-size: 20rpx;">￥</text>{{i.goods_vip_price}}</text> 
						</text>
					</view>
					<text style="position: relative;top: 30rpx;">{{i.goods_spec_item_name}}</text>
				</view>
			</view>
			<view class="solid"></view>
			<view class="money flex align-center justify-end">
				 
			</view>
		</view>
		<view class="colse ">
			<view class="flex-cb" @click="iscolse = 0">
				<text>无优惠：</text>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==0" ></view>
				<text class="cuIcon" v-else ></text>
			</view>
			<view class="flex-cb" @click="iscolse =1">
				<text>积分最多抵扣：
					<text style="font-size: 40rpx;color: #FF2E2E;">
						<text style="font-size: 26rpx;">￥</text>{{vipdata.point_price||0}}
					</text>
				</text>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==1" ></view>
				<text class="cuIcon" v-else ></text>
			</view>
			<view class="flex-cb" @click="handleColse">
				<view class="flex align-center" style="margin: 0;">
					<image src="/static/vip.png"  style="width: 34rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
					<text>会员价：
						<text style="color: #FF2E2E;font-size: 40rpx;">
							<text style="font-size: 26rpx;">￥</text>{{vipdata.vip_price}}
						</text>
					</text>
				</view>
				<view class="cuIcon-squarecheckfill" v-if="iscolse ==2" ></view>
				<text class="cuIcon" v-else ></text>
			</view>
		</view>
		<view class="colse flex-c" style="min-height: auto;font-weight: bold;" v-if="vipdata.points">
			<text>
				<text style="letter-spacing: 6rpx;font-size: 30rpx;">下单返</text>
				<text style="color: #FF2E2E;font-size: 38rpx;">：</text>
				<text style="color: #FF2E2E;font-size: 40rpx;padding: 0 20rpx;">{{vipdata.points}}</text>积分
			</text>
		</view>
		<view class="beizhu margin">
			<text style="font-weight: bold;font-size: 30rpx;">备注</text>
			<textarea cols="30" rows="10" v-model="text" placeholder="口味、偏好、忌口等要求"></textarea>
		</view>
		<view class="foot flex-cb">
			<view class="money flex align-center">
				<text style="font-size: 30rpx;">合计：</text>
				<text style="font-size: 30rpx;color: #FF2E2E;">￥</text>
				<text style="font-size: 40rpx;color: #FF2E2E;">{{iscolse==0?vipdata.price:iscolse==1?vipdata.jifen_price:vipdata.vip_price}}</text>
			</view>
			<view class="button flex-c" @click="navigate">立即支付</view>
		</view>
	</view>
</template>
	
<script>
	export default {
		data() {
			return {
				tab:0,
				iscolse:0,//0积分抵扣 1会员价
				ispay:0,
				food:'',
				text:'',
				id:[],
				table_id:'',
				table:'',
				url:'',
				vipdata:{
					vip_price:0,
					price:0,
					point:0,
					points:0,
					point_price:0,
					jifen_price:0,
					id:[],
					num:1,
				},
				personNum:null
			};
		},
		computed:{
			item(){
				return function(i){
					return this.$utils.changeTwoDecimal_f(parseFloat(i.goods_price)-parseFloat(i.goods_point_price))
				}
			}
		},
		onLoad(e) {
			this.url = this.$base
			this.table_id = e.table_id
			this.table = e.table
			this.personNum = e.people_number
			this.id = JSON.parse(e.id)
			this.food = JSON.parse(e.data)
			for (let i = 0; i < this.food.length; i++) {
				this.vipdata.vip_price += parseFloat(this.food[i].goods_vip_price) * parseFloat(this.food[i].number)
				this.vipdata.price += parseFloat(this.food[i].goods_price) * parseFloat(this.food[i].number)
				this.vipdata.point = this.food[i].goods_need_point//100积分抵扣
				this.vipdata.point_price += (parseFloat(this.food[i].goods_price) - parseFloat(this.food[i].goods_point_price))*parseFloat(this.food[i].number)//积分抵扣金额
				this.vipdata.id[i] = this.food[i].id
				this.num += this.food[i].number
				this.vipdata.points += parseInt(this.food[i].goods_give_point)*parseInt(this.food[i].number)
				
			}
			this.vipdata.jifen_price = this.vipdata.price - this.vipdata.point_price
			this.vipdata.jifen_price = this.$utils.changeTwoDecimal_f(this.vipdata.jifen_price)
			this.vipdata.vip_price = this.$utils.changeTwoDecimal_f(this.vipdata.vip_price)
			this.vipdata.price = this.$utils.changeTwoDecimal_f(this.vipdata.price)
			this.vipdata.point_price = this.$utils.changeTwoDecimal_f(this.vipdata.point_price)
			
		},
		methods:{
			handleColse(){
				this.iscolse = 2
				this.$api.user().then(res=>{
					
					if(res.data.vip_expire_time == null){
						this.getVip()
					}else{
						// 
						let t =new Date(res.data.vip_expire_time.replace(/-/g,"/")).getTime()/1000;//到期时间戳
						let newt = Date.parse(new Date()) /1000//当前时间戳
						console.log(t);
						if(t<newt){
							this.getVip(1)
						}
					}
				})
			},
			navigate(){
				// uni.navigateTo({
				// 	url:'./pay'
				// })
				this.$api.cart_orders({
					type:4,
					cart_type:4,
					cart_ids:this.vipdata.id,//商品id集
					discount_method:this.iscolse,//优惠类型
					remark:this.text,
					table_id:this.table_id,
					people_number:this.personNum
				},this.food[0].mch_id,1).then(res=>{
					if(res.code == 200001){
						 this.payzf(res.data.order_id)
					}
					if(res.code == 100407){
						this.$utils.tips('你的积分不足')
						return
					}
					if(res.code == 100403){
						this.getVip()
					}
				})
			},
			getVip(i){
				uni.showModal({
					title:'提示',
					content:i==1?"您的会员已到期，是否前往续费":'您还不是会员无法享受会员价，是否前往开通',
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'/pageC/mine/Function list/vip'
							})
						}
					}
				})
			},
			payzf(id){
				this.$api.cart_orders_pay({},id,1).then(res=>{
					let that = this
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						 success:(r)=>{  
							 console.log(r,3);
							 that.$api.cart_orders_notify({},id,1).then(res=>{
							 	console.log(res,'4');
							 	 if(res.code == 200001){
									 uni.showToast({
									 	title:"下单成功",icon:"none"
									 })
									 that.deteles()//删除购物车商品
							 		 uni.navigateBack()
							 	 }
							 })
						 }, 
						 complete(err) {
							 console.log(err);
						 }
					})
				})
			},
			deteles(){
				// for (let i = 0; i < this.id.length; i++) {
					this.$api.cartsClear({
						type:2
					},this.food[0].mch_id,1).then(res=>{
						console.log(res);
						if(res.code == 200001){
							uni.showToast({
								icon:"none",title:'删除成功'
							})
							
						}
					})
				// }
				
			},
		}
	}
</script>
	
<style lang="scss">
.margin{
	margin:10rpx auto;
}
.head{
	width: 710rpx;
	min-height: 447rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 32rpx 0 28rpx 0;
	.title{
		margin-left: 36rpx;
		font-size: 26rpx;
		color: #333333;
		text{
			margin-left: 10rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.text_div{
		padding-left: 38rpx;
		padding-right: 24rpx;
		margin-top: 41rpx;
		margin-bottom: 40rpx;
		image{
			width: 176rpx;height: 176rpx;border-radius: 10rpx;margin-right: 20rpx;
		}
		.text{
			flex: 1;
			.food_name{
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #252525;
				line-height: 50rpx;
			}.num{margin-top: 22rpx;}
			.x1{
				font-size: 26rpx;
			}
			.jifen{
				color: #FF6F10;
				font-size: 22rpx;
			}
		}
	}
	.solid{
		width: 686rpx;margin: auto;
	}
	.money{
		height: 112rpx;
		.vip{font-size: 30rpx;}
		.price{font-size: 40rpx;margin-right: 30rpx;}
	}
}

.colse{
	margin: 20rpx auto;
	width: 706rpx;
	height: auto;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 20rpx 23rpx;
	view{
		height: 40rpx;
		margin-bottom: 33rpx;
		font-size: 30rpx;
		color: #2F2F2F;
		font-weight: bold;
		.cuIcon{
			margin: 0;
			width: 40rpx;height: 40rpx;
			background: #F0F0F0;
			border-radius: 6rpx;
		}
		.cuIcon-squarecheckfill{
			font-size: 44rpx;
			color: #1CD699;
			font-weight: 100;
		}
	}
}
.beizhu{
	width: 710rpx;
	height: 265rpx;
	margin-bottom: 180rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 28rpx 30rpx;
	overflow: hidden;
	textarea{
		height: 100%;
		font-weight: bold;
		font-size: 26rpx;
		padding-top: 25rpx;
	}
}
.foot{
	width: 750rpx;
	height: 120rpx;
	background: #FFFFFF;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 22rpx 26rpx;
	z-index: 2;
	.money{
		flex: 1;
		height: 100%;
		border-radius: 50rpx 0 0 50rpx;
	}
	.button{
		width: 217rpx;
		height: 80rpx;
		background: #1CD699;
		border-radius: 50rpx;
		color: #FFFFFF;
	}
}
</style>
	